<script lang="tsx">
  import { defineComponent, computed, ref, PropType } from 'vue'
  import { AgGridVue } from 'ag-grid-vue3'
  import './utils/enterprise'
  import ownEventsInit from './utils/own-events'
  import { mergeConfig, mergeEvent } from './utils'
  import scrollStateKeep from './composables/scroll-state-keep'
  import headerGroupStyle from './composables/header-group'

  type TextAlign = 'left' | 'center' | 'right'

  export default defineComponent({
    name: 't-ag-grid',
    props: {
      // 是否带有斑马纹
      stripe: {
        type: Boolean,
        default: true
      },
      // header 文本对齐方式
      headerAlign: {
        type: String as PropType<TextAlign>,
        default: 'left'
      },
      // body 文本对齐方式
      align: {
        type: String as PropType<TextAlign>,
        default: 'left'
      },
      // 提供新行数据时，网格不会滚动到顶部
      suppressScrollOnNewData: {
        type: Boolean,
        default: true
      }
    },
    inheritAttrs: false,
    setup(props, { attrs }) {
      const agGridRef = ref()

      // 传入属性与默认属性合并
      const mergeAttrs = computed(() => mergeConfig(attrs))

      // 组件内 监听事件
      const ownEvents = ownEventsInit()

      // 滚动状态保持
      scrollStateKeep(ownEvents, agGridRef)
      // 表头分组 - 单元格合并样式
      headerGroupStyle(ownEvents, mergeAttrs, agGridRef)

      // 合并 props 和 event
      const options = computed(() => mergeEvent(mergeAttrs.value, ownEvents))

      return () => <AgGridVue
        ref={ agGridRef }
        class="ag-theme-balham t-ag-grid"
        data-header-align={ props.headerAlign }
        data-align={ props.align }
        data-stripe={ props.stripe }
        suppress-scroll-on-new-data={ props.suppressScrollOnNewData }
        { ...options.value }
      />
    }
  })
</script>

<style lang="less">
  @import "ag-grid-community/dist/styles/ag-grid.css";
  @import "ag-grid-community/dist/styles/ag-theme-balham.css";
  /* 自定义样式 */
  @import "./styles/index.less";
</style>